<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>登录-咔咔兔管理系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
 	<@h.head />
 	<script type="text/javascript" src="${path}/static/js/bui-min.js"></script>
	<script type="text/javascript" src="${path}/static/js/main-min.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            background-color: #eee;
            min-height: 100%;
            _height:100%;
            position: relative;
            overflow-x: hidden;
        }
        .top-container .header{
            background: url(${path}/static/image/login-bg.png) repeat 0 0 ;
            width: 100%;
            height: 100px;
        }
        .top-container .header > header{
            padding:40px;width: 280px;margin-left: 10%;
        }
        .top-container .header .l-logo{
            font-size: 3.5em;
            color:#fff;
        }
        .top-container .content{
            background: url(${path}/static/image/login-bg.png) repeat 0 0 ;
            background-origin: content-box;
            height: 200px;
        }
        .bottom-container{
            min-height: 100%;
            _height:100%;
        }
        .bottom-container > .bottom-content{
            height: 245px;
        }
        /*copyright*/
        .bottom-container > .foot{
            position:absolute;
            bottom: 0;
            text-align: center;
            width:350px;
            color:#666;
            word-spacing: 3px;
            left: 50%;
            margin-left: -125px;
        }
        #theForm{
            border: 1px solid #ddd;
            background-color: #fff;
            margin-top: 0;
            border-radius: 5px;
            width: 400px;
            padding: 0;
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
            top:100px;
            position:relative;
            margin-right: auto;
            margin-left: auto;
        }
        #theForm #owl{
            width: 211px;
            height: 108px;
            background: url(${path}/static/image/owl.png) -51px 0 no-repeat;
            position: absolute;
            top: -100px;
            left: 50%;
            margin-left: -111px;
        }
        #owl > .arms{
            top:58px;
            position: absolute;
            width: 100%;height: 40px;
            overflow: hidden;
        }
        #owl > .arms > .arm{
            width: 40px;
            height: 65px;
            position: absolute;
            left: 20px;
            top: 40px;
            background: url(${path}/static/image/owl.png) 0 0 no-repeat;
        }
        #owl > .arms > .arm-r{
            background: url(${path}/static/image/owl.png) -278px 0 no-repeat;
            left: 160px;
        }

        #theForm .fields{
            color: #444;
            overflow: hidden;
            padding: 30px 40px;
        }
        #theForm .control-group{
            margin-bottom: 13px;
        }
        #theForm .control-group:last-child{
            margin-bottom: 0;
        }
        #theForm .controls{
            position: relative;
        }
        #theForm .controls .control-label{
            position: absolute;
            top: 12px;
            left: 12px;
            font-size: 16px;
            color: #b7b7b7;
        }
        #theForm .controls .form-control-input{
            padding: 9px 6px 9px 40px;
            height: auto;
            color: #444;
            width:320px;*width:275px;
            font-size: 14px;
            line-height: 17px;
            vertical-align: middle;
            background-color: #fff;
            border:1px solid #ccc;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        #theForm .controls .input-captcha{ width: 220px;*width:173px;}
        #theForm .buttons{
            border-top: 1px solid #e4e4e4;
            background-color: #f7f7f7;
            padding: 15px 40px;
            text-align: right;
        }
        #theForm .buttons .remember{
            display: inline;float: left;color: #999999;line-height: 30px;margin-left: 5px;
        }
        #theForm .buttons .remember > .fn-vm{
            height:15px; vertical-align:text-top; margin-top:0;
        }
        #captchaImg{vertical-align:middle;cursor:pointer;margin-left: 5px;}
        .tips-notice{border-color:#EDD8AD}
        .fn-pd5{
            padding:5px;
        }
        .fn-placeholder{
            color:#aaa !important;
        }

        /*动画*/
        .a-fadeinT,.a-fadeinR{
            -webkit-animation: 1s ease-out backwards;
            -moz-animation: 1s ease-out backwards;
            -ms-animation: 1s ease-out backwards;
            animation: 1s ease-out backwards;
        }
        .a-fadeinT{
            -webkit-animation-name: fadeinT;
            -moz-animation-name: fadeinT;
            -ms-animation-name: fadeinT;
            animation-name: fadeinT;
        }
        .a-fadeinR {
            -webkit-animation-name: fadeinR;
            -moz-animation-name: fadeinR;
            -ms-animation-name: fadeinR;
            animation-name: fadeinR;
        }
        /* 淡入-从上 */
        @-webkit-keyframes fadeinT{
            0%{opacity:0;-webkit-transform:translateY(-100px);}
            100%{opacity:1;-webkit-transform:translateY(0);}
        }
        @-moz-keyframes fadeinT{
            0%{opacity:0;-moz-transform:translateY(-100px);}
            100%{opacity:1;-moz-transform:translateY(0);}
        }
        @-ms-keyframes fadeinT{
            0%{opacity:0;-ms-transform:translateY(-100px);}
            100%{opacity:1;-ms-transform:translateY(0);}
        }
        @keyframes fadeinT{
            0%{opacity:0;transform:translateY(-100px);}
            100%{opacity:1;transform:translateY(0);}
        }
        /* 淡入-从右 */
        @-webkit-keyframes fadeinR{
            0%{opacity:0;-webkit-transform:translateX(100px);}
            100%{opacity:1;-webkit-transform:translateX(0);}
        }
        @-moz-keyframes fadeinR{
            0%{opacity:0;-moz-transform:translateX(100px);}
            100%{opacity:1;-moz-transform:translateX(0);}
        }
        @-ms-keyframes fadeinR{
            0%{opacity:0;-ms-transform:translateX(100px);}
            100%{opacity:1;-ms-transform:translateX(0);}
        }
        @keyframes fadeinR{
            0%{opacity:0;transform:translateX(100px);}
            100%{opacity:1;transform:translateX(0);}
        }
    </style>

</head>
<body>
    <div class="top-container">
        <div class="header">
            <header>
                <label class="l-logo">
                    <span class="a-fadeinT">Log</span>
                    <span class="a-fadeinR">in</span>
                </label>
            </header>
        </div>
        <div class="content">
            <div id="theForm" >
                <div id="owl" class="owl">
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="fields">
                    <!-- 信息提示区域 -->
                    <div class="control-group">
                        <div class="controls">
                            <div class="alert alert-error hide" style="display: block;">
                            	<i class="fa fa-quote-left fa-lg"></i>
								<span id="noticeTip">请输入用户名、密码登录。</span>
							</div>
                        </div>
                    </div>
                    <!-- /信息提示区域 -->
                    <div class="control-group">
                        <div class="controls">
                            <label for="username" class="control-label"><i class="fa fa-user fa-lg"></i></label>
                            <input type="text" name="username" id="username" placeholder="用户名" tabindex="1" autofocus="true"
                                  value="admin" class="form-control-input" autocomplete="off" data-rules="{required:true}"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <label for="password" class="control-label"><i class="fa fa-key fa-lg"></i></label>
                            <input type="password" name="password" id="password" placeholder="密码" tabindex="1" autofocus="true"
                                  value="111111" class="form-control-input" autocomplete="off" data-rules="{required:true}"/>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <button class="button button-primary " id="loginBtn" tabindex="5">登录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-container">
        <div class="bottom-content"></div>
        <div class="foot">
            <p>&copy; 2016-2017 KaKaTour All Rights Reserved.</p>
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="${path}/static/plugins/lhgdialog/lhgdialog.min.js?skin=chrome"></script>
<script>
$(function(){
    // 闭眼动画
    $('#password').focus(function() {
        $('#owl').find('.arm').stop().first().animate({top:'5px',left:'65px'},300).next().animate({top:'5px',left:'120px'},300);
    }).blur(function() {
        $('#owl').find('.arm').stop().first().animate({top:'40px',left:'20px'},300).next().animate({top:'40px',left:'160px'},300);
    });

 	// 表单回车事件
    $('#theForm').keydown(function( e ){
        if( e.keyCode == 13 ){
            $("#loginBtn").trigger('click');
        }
    });
    // 登录事件
    $("#loginBtn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        if(!username) {
        	$("#noticeTip").text("请输入用户名、密码登录。");
        	$("#username").focus();
        	return;
        }
        if(!password) {
        	$("#noticeTip").text("请输入用户名、密码登录。");
        	$("#password").focus();
        	return;
        }
        var loading = $.dialog({
        	title: '提示',
 	    icon: 'loading.gif',
 	    lock: true,
 	    content: '正则提交表单，请稍等...'
 	});
        $.ajax({
            url : '${path}/login',
            type : 'post',
            cache : false,
            dataType : 'json',
            data : $("#theForm").find('input').serialize(),
            success : function( data ){
                if (data.status == "200") {
		window.location.href = "${path}/index";
	} else {
		$("#noticeTip").text(data.error);
             	loading.close();
	}
            },
            error : function(){
            	$("#noticeTip").text("网络异常，请联系管理员");
            	loading.close();
            }
        });
        return false;
    });
});
</script>